<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="left" class="main-ruleForm">
    <el-form-item class="el-large" label="中文全名" prop="ChineseFullName">
      <el-input v-model="ruleForm.ChineseFullName" />
    </el-form-item>
    <el-form-item class="el-large" label="姓（拼音）" prop="surname">
      <el-input v-model="ruleForm.surname" />
    </el-form-item>
    <el-form-item class="el-large" label="名（拼音）" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item class="el-large" label="英文名（如果有）">
      <el-input v-model="ruleForm.englishFullName" />
    </el-form-item>
    <el-form-item class="el-large" label="性别" prop="gender">
      <el-radio-group v-model="ruleForm.gender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="el-large" label="婚姻状况" prop="marriage">
      <el-select v-model="ruleForm.marriage" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="身份证或护照号码" prop="passport">
      <el-input v-model="ruleForm.passport" />
    </el-form-item>
    <el-form-item class="el-large" label="国籍/地区" prop="ndistrict">
      <el-select v-model="ruleForm.ndistrict" placeholder="请选择">
        <el-option label="中国" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="space-around" label="出生日期">
      <el-form-item class="el-Small prop" prop="dateOfBirthYear">
        <el-select v-model="ruleForm.dateOfBirthYear" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <span class="filling"> 年 </span>
      <el-form-item class="el-Small prop" prop="dateOfBirthMoom">
        <el-select v-model="ruleForm.dateOfBirthMoom" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <span class="filling">月</span>
      <el-form-item class="el-Small prop" prop="dateOfBirthDay">
        <el-select v-model="ruleForm.dateOfBirthDay" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <span class="filling">日</span>
    </el-form-item>
    <el-form-item class="el-large" label="出生地" prop="PlaceOfBirth">
      <el-select v-model="ruleForm.PlaceOfBirth" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <div class="title">通讯地址</div>
    <el-form-item class="el-large" label="如有资料寄送,您希望我们联系您的" prop="ruins">
      <el-radio v-model="ruleForm.ruins" label="1" size="large">公司地址</el-radio>
      <el-radio v-model="ruleForm.ruins" label="2" size="large">家庭地址</el-radio>
    </el-form-item>
    <el-form-item class="el-large" label="手机" prop="handDesk">
      <el-input v-model="ruleForm.handDesk" />
    </el-form-item>
    <el-form-item class="el-large" label="电子信箱1" prop="emailboxone">
      <el-input v-model="ruleForm.emailboxone" />
    </el-form-item>
    <el-form-item class="el-large" label="电子信箱2">
      <el-input v-model="ruleForm.emailboxtwo" />
    </el-form-item>
    <el-form-item class="el-large" label="微信号" prop="wxnumber">
      <el-input v-model="ruleForm.wxnumber" />
    </el-form-item>
    <div class="secondary-title">公司地址</div>
    <el-form-item class="el-large" label="国家/地区" prop="companyRegion">
      <el-select v-model="ruleForm.companyRegion" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="省份" prop="companyProvince">
      <el-select v-model="ruleForm.companyProvince" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="城市" prop="companyCity">
      <el-input v-model="ruleForm.companyCity" />
    </el-form-item>
    <el-form-item class="el-large" label="详细地址" prop="companyAddress">
      <el-input v-model="ruleForm.companyAddress" />
      <p class="hint">（无需重复填写省份及城市）</p>
    </el-form-item>
    <el-form-item class="el-large" label="邮政编号" prop="companyPostCode">
      <el-input v-model="ruleForm.companyPostCode" />
    </el-form-item>
    <el-form-item class="space-around" label="办公电话1" prop="companyPhoneOne">
      <el-form-item class="el-Small prop" prop="companyPhoneOne">
        <el-input v-model="ruleForm.companyPhoneOne" />
        <p class="hint">（区号-电话）</p>
      </el-form-item>
      <span class="filling">——</span>
      <el-form-item class="el-default prop" prop="companyPhoneTwo">
        <el-input v-model="ruleForm.companyPhoneTwo" />
      </el-form-item>
    </el-form-item>
    <div class="secondary-title">家庭地址</div>
    <el-form-item class="el-large" label="国家/地区" prop="familyRegion">
      <el-select v-model="ruleForm.familyRegion" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="省份" prop="familyProvince">
      <el-select v-model="ruleForm.familyProvince" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="城市" prop="familyCity">
      <el-input v-model="ruleForm.familyCity" />
    </el-form-item>
    <el-form-item class="el-large" label="详细地址" prop="familyAddress">
      <el-input v-model="ruleForm.familyAddress" />
      <p class="hint">（无需重复填写省份及城市）</p>
    </el-form-item>
    <el-form-item class="el-large" label="邮政编号" prop="familyPostCode">
      <el-input v-model="ruleForm.familyPostCode" />
    </el-form-item>
    <el-form-item class="space-around" label="家庭电话" prop="familyPhoneOne">
      <el-form-item class="el-Small prop" prop="familyPhoneOne">
        <el-input v-model="ruleForm.familyPhoneOne" />
        <p class="hint">（区号-电话）</p>
      </el-form-item>
      <span class="filling">——</span>
      <el-form-item class="el-default prop" prop="familyPhoneTwo">
        <el-input v-model="ruleForm.familyPhoneTwo" />
      </el-form-item>
    </el-form-item>
    <div class="title">紧急联系人</div>
    <el-form-item class="el-large" label="姓名" prop="emergencyContactName">
      <el-input v-model="ruleForm.emergencyContactName" />
      <div class="combination">
        <el-radio-group v-model="ruleForm.emergencyContactGender">
          <el-radio label="先生"></el-radio>
          <el-radio label="女士"></el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item class="el-large" label="电话/手机" prop="emergencyContactHandDesk">
      <el-input v-model="ruleForm.emergencyContactHandDesk" />
    </el-form-item>
    <div class="title">其他</div>
    <el-form-item class="el-large" label="直系亲属/配偶中是否有中欧校友 ">
      <el-radio-group v-model="ruleForm.otherAlumni">
        <el-radio label="是"></el-radio>
        <el-radio label="否"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="el-large" label="姓名">
      <el-input v-model="ruleForm.otherName" />
    </el-form-item>
    <el-form-item class="el-large" label="关系">
      <el-input v-model="ruleForm.otherRelation" />
    </el-form-item>
    <el-form-item class="el-large" label="班级">
      <el-input v-model="ruleForm.otherClass" />
    </el-form-item>
    <div class="footer-but">
      <el-button type="primary" @click="saveForm('ruleFormRef')">保存</el-button>
      <el-button type="info" @click="resetForm('ruleFormRef')">重置</el-button>
    </div>
  </el-form>
  <div>

  </div>
</template>

<script>
import rules from '@/util/rules.js'
export default {
  name: "information", //个人信息
  props: {},
  data() {
    return {
      ruleForm: {
        PlaceOfBirth: '',
      },
      rules: rules,
    };
  },
  methods: {
    saveForm(formName) {
      console.log('保存');
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.ruleForm = {},
        this.$refs[formName].resetFields();
    }
  },
  components: {},
};
</script>

<style scoped lang="scss">
.main-ruleForm {

  // position: relative;
  .title {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #003963;
    margin: 60px 0 30px;
  }

  .secondary-title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    margin: 50px 0 30px;
  }

  .hint {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
  }

  .combination {
    margin-top: 15px;
  }

  .prop {
    ::v-deep .el-form-item__content {
      width: auto;
      display: block;
    }
  }

  .footer-but {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;

    ::v-deep .el-button {
      width: 250px;
      height: 55px;
      margin: 30px 22.5px;
    }
  }
}

@media (max-width: 768px) {
  .main-ruleForm {
    .title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #003963;
      margin: 60px 0 30px;
    }

    .secondary-title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      margin: 50px 0 30px;
    }

    .hint {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5a5a5a;
    }

    .prop {
      ::v-deep .el-form-item__content {
        width: auto;
        display: block;
      }
    }

    .footer-but {
      ::v-deep .el-button {
        width: 125px;
        height: 40px;
        margin: 31px 22.5px;
        font-size: 16px;

      }
    }
  }
}
</style>
